<template>
  <view class="diyTabbar">
    <view class="item" v-for="(item, index) in list" :key="index" @click="gotolink(item)">
      <view class="image-box">
        <image :src="$util.img(item.srcHover)" mode="" v-if="item.link.includes(current)"></image>
        <image :src="$util.img(item.src)" mode="" v-else></image>
      </view>
      <view class="title" :class="item.link.includes(current) ? 't-01' : 't-02'">{{ item.title }}</view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    current: {
      type: String,
      default: 'index'
    }
  },
  data() {
    return {
      list: [{
        src: '/static/img/tabbar/首页.png',
        srcHover: '/static/img/tabbar/首页选中.png',
        title: '首页',
        link: '/pages/index/index'
      }, {
        src: '/static/img/tabbar/商城.png',
        srcHover: '/static/img/tabbar/商城选中.png',
        title: '极客 商城',
        link: '/pages/shopping/shopping'
      }, {
        src: '/static/img/tabbar/工会.png',
        srcHover: '/static/img/tabbar/工会选中.png',
        title: '潮卡',
        link: '/pages/tidalcard/tidalCard'
      }, {
        src: '/static/img/tabbar/我的.png',
        srcHover: '/static/img/tabbar/我的选中.png',
        title: '我的',
        link: '/pages/my/my'
      }]
    }
  },
  mounted() {
    this.getTbabar();
  },
  methods: {
    // 跳转方法
    gotolink(item) {
      this.$util.redirectTo(item.link, {}, 'switchTab')
    },
    //获取底部导航数据
    getTbabar() {
      this.$http.asyncSendrequest({
        url: '/login/indexTabbar',
        success: res => {
          let list = [];
          for (let i = 0; i < res.data.length; i++) {
            let obj = {
              src: res.data[i].icon,
              srcHover: res.data[i + 1].icon,
              title: res.data[i].name,
              link: res.data[i].link
            }
            list.push(obj);
            i++;
          }
          this.list = list.reverse();
        }
      })
    }
  }

}
</script>

<style lang="scss" scoped>
.diyTabbar {
  width: 100%;
  height: 100rpx;
  background: #FFFFFF;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10rpx 62rpx;
  z-index: 999;

  .item {
    .image-box {
      width: 100%;
      height: 45rpx;
      margin-bottom: 10rpx;
      text-align: center;

      image {
        width: 45rpx;
        height: 100%;
      }
    }

    .title {
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 500;
    }

    .t-01 {
      color: #292929;
    }

    .t-02 {
      color: #999999;
    }
  }
}
</style>